<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
    <div @click="handlerClick('back')">back</div>
    <div @click="handlerClick('push')">push</div>
    <div @click="handlerClick('replace')">replace</div>
    <div>{{name}}</div>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import { getUserData } from "@/utils/serve.js";
export default {
  name: "Home",
  props: {
    name: {
      type: String,
      default: "123",
    },
  },
  components: {
    HelloWorld,
  },
  beforeRouteEnter(to, from, next) {
    console.log("beforeRouteEnter", to.name);
    //获取不到this示例
    next();
    // next(vm=>{
    //   console.log('beforeRouteEnter vm',vm);
    // });
  },
  beforeRouteLeave(to, from, next) {
    console.log("beforeRouteLeave", to.name);
    const leave = confirm("您确定要离开?");
    if (leave) next();
  },
  beforeRouteUpdate(to, from, next) {
    //路由发生变化，组件是复用组件
    console.log("beforeRouteUpdate", to.name);
  },
  mounted() {
    getUserData({
      json: true,
    }).then((res) => {
      console.log("请求", res);
    });
  },
  methods: {
    handlerClick(type) {
      console.log("handlerClick");
      // this.$router.go(-1)
      if (type === "back") this.$router.back();
      if (type === "push")
        // this.$router.push({
        //   name: "Parent",
        //   query:{
        //     name:'listen'
        //   }
        // });
        this.$router.push({
          path: "/about/listen",
        });
      if (type === "replace") {
        this.$router.replace({
          name: "Parent",
        });
      }
    },
  },
};
</script>
